<template>
  <el-dialog  :destroy-on-close="true" :lock-scroll="false" title="巡检回执" :visible.sync="visible"  :before-close="() => {$emit('cancel');}"
              custom-class="ele-dialog-form" width="600px">
    <el-form :model="form"  :rules="rules" ref="form">
      <el-form-item label="是否巡检：" prop="acted">
        <el-select v-model="form.acted" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否异常：" prop="exception">
        <el-select v-model="form.exception" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="巡检日期：" prop="complete_at">
          <el-date-picker
            v-model="form.complete_at"
            type="datetime"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd H:mm:ss"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      <el-form-item label="回执内容：" prop="complete_description">
        <el-input v-model="form.complete_description" :rows="4" placeholder="请输入审核备注" type="textarea" />
      </el-form-item>
      <el-form-item  label="照片" >
        <uploadImage v-model="form.images" :limit="4"></uploadImage>
        <div class="el-upload__tip">请上传jpg、png图片附件，最多可上传4张，单张大小不要超过8M。</div>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="cancel" type="primary">取消</el-button>
      <el-button :loading="loading" type="primary" @click="save">完成回执</el-button>
    </div>
  </el-dialog>
</template>


<script>
import uploadImage from '@/components/uploadImage.vue'
export default {
  name: "complete",
  components:{
    uploadImage
  },
  props: {
    // 弹窗是否打开
    visible: Boolean,
    id: {
      type:[String,Number]
    }
  },

  data() {
    return {
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() < new Date().getTime();
        }
      },
      rules: {
        acted: [
          { required: true, message: "请选择是否巡检", trigger: "change" }
        ],
        exception: [
          { required: true, message: "请选择是否异常", trigger: "change" }
        ],
        complete_at: [
          { required: true, message: "请选择巡检日期", trigger: "blur" }
        ],

      },
      options:[
        {value: 1, label: '是'},
        {value: 0, label: '否'},
      ],
      loading:false,
      form:{},
    };
  },

  mounted() {

  },

  methods: {
    //提交审核
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$http.post(`/pollings/${this.id}/receipt`,{...this.form}).then(res => {
            if (res.data.code === 0) {
              this.$message.success(res.data.msg);
              this.$emit('done')
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            this.$message.error(e.message);
          });
        } else {
          this.loading = false;
          return false;
        }
        this.loading = false;
      });
    },
    //取消审核
    cancel(){
      this.$emit('cancel')
    }
  }
};
</script>
<style lang="scss" scoped>
.el-date-editor {
  width: 100%;
}
.el-autocomplete{
  width: 100%;
}
.el-select{
  width: 100%;
}
</style>
